<template>
  <div class="header">
    <div class="content-wrapper">
    	<!--img-->
      <div class="avatar">
      	<img :src="seller.avatar"  width="64"  height="64" alt="品香坊（回龙观）"/>
      </div>
      <!--cexten-->
      <div class="content">
      	<div class="title">
      	  <span class="brand bg-image"></span>
      	  <span class="name">{{seller.name}}</span>
      	</div>
      	 <!--送达-->
	      <div class="description">
	      	{{seller.description}}/{{seller.deliveryTime}}分钟送达
	      </div>
	       <!--icon-->
	      <div class="support" v-if="seller.supports" >
	         <span class="icon" :class="classMap[seller.supports[0].type]"></span>
	         <span class="text">{{seller.supports[0].description}}</span>
	      </div>
      </div>
      <!--5个-->
      <div class="support-count"  v-if="seller.supports" @click="showDetail">
       	<span class="count">{{seller.supports.length}}个</span>
       	<i class="icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <!--横向文字滚动条-->
    <div class="bulletin-wrapper" @click="showDetail">
    	<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
    	<i class="icon-keyboard_arrow_right"></i>
    </div>
     <!--背景图片-->
    <div class="backgroud">
    	<img :src="seller.avatar" alt="背景图片"  width="100%" height="100%"/>
    </div>
    <!--遮罩层  css Sticky footer布局-->
    <transition name="fade" mode="">
    	<div class="detail" v-show="detailshow">
    		<div class="deta-wrapper clearfix">
    			 <div class="detail-main">
    			 	    <!--text-->
    			 		  <h1 class="name">{{seller.name}}</h1>
    			 		  <!--星星-->
    			 		  <div class="star-wrapper">
    			 		  	<star :size="48" :score="seller.score"></star>
    			 		  </div>
    			 		  <!--tip-->
    			 		  <div class="title">
    			 		  	<div class="line"></div>
    			 		  	<div class="text">优惠信息</div>
    			 		  	<div class="line"></div>
    			 		  </div>
    			 		  <!--ul-->
    			 		  <ul v-if="seller.supports" class="supports">
    			 		  	<li class="support-item" v-for="(item,index) in seller.supports">
    			 		  		<span class="icon" :class="classMap[seller.supports[index].type]"></span>
    			 		  		<span class="text">{{seller.supports[index].description}}</span>
    			 		  	</li>
    			 		  </ul>
    			 		  <!--tip2-->
    			 		  <div class="title">
    			 		  	<div class="line"></div>
    			 		  	<div class="text">商家公告</div>
    			 		  	<div class="line"></div>
    			 		  </div>
    			 		  <!--content-->
    			 		  <div class="bulletin">
    			 		  	<p class="content">{{seller.bulletin}}</p>
    			 		  </div>
    			 </div>
    		</div>
    	  <div class="detail-close" @click="hideDetail">
    	  	<i class="icon-close"></i>
    	  </div>
    </div>
    </transition>
  
  </div>
</template>

<script>
import star from '../star/star'
export default {
  name: 'v-heady',
  props: {
    seller:{
      type:Object
    }
  },
  data () {
    return {
      detailshow :false
    }
  },
  created(){
  	  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
  },
  methods:{
  	showDetail(){
  		this.detailshow=true;
  	},
  	hideDetail(){
  		this.detailshow=false;
  	}
  },
  components: {
    star
  },
  watch:{
   	'seller'(to,form){
// 		console.log(this.seller)
   	}
   }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
       @import "../../common/stylus/border.css";
       @import "../../common/stylus/url.less";
       @import "../../common/stylus/icon.less";
       .fade-enter,.fade-leave-to{opacity: 0}
       .fade-enter-active,.fade-leave-active{transition: opacity 1s;}
         
			.header{
				position: relative;
				overflow: hidden;
				color: #fff;
				background:rgba(7,17,27,0.5);
				.content-wrapper{
					position: relative;
					padding: 24px 12px 18px 24px;
					font-size:0;
					.avatar{
						display: inline-block;
						font-size: 14px;
						vertical-align: top;
						img{
							border-radius:2px;
						}
					}
					.content{
						display: inline-block;
						margin-left: 16px;
						.title{
							margin: 2px 0 8px 0;
							.brand{
								display: inline-block;
								width: 30px;
								height: 18px;
								vertical-align: top;
							  &.bg-image{
								  background: url(img/brand@2x.png) ;
								  background-repeat: no-repeat;
							    background-size: cover;
							   }
							}
							.name{
								margin-left: 6px;
								font-size: 16px;
								line-height: 18px;
								font-weight: bold;
							}
						}
					.description{
						 margin-bottom: 10px;
						 line-height:12px;
						 font-size: 12px;
					}
					.support{
						.icon{
							display: inline-block;
							width: 12px;
							height: 12px;
							margin-right: 4px;
							vertical-align: top;
							&.decrease{
								 background: url(img/decrease_1@2x.png);
								 background-repeat: no-repeat;
							   background-size:cover;
							}
							&.discount{
								background: url(img/discount_1@2x.png);
								background-repeat: no-repeat;
							  background-size:cover;
							}
							&.guarantee{
								background: url(img/guarantee_1@2x.png);
								background-repeat: no-repeat;
							  background-size:cover;
							}
							&.invoice{
								background: url(img/invoice_1@2x.png);
								background-repeat: no-repeat;
							  background-size:cover;
							}
							&.special{
								background: url(img/special_1@2x.png);
								background-repeat: no-repeat;
						   	background-size:cover;
							}
						}
						.text{
							line-height: 12px;
							font-size: 12px;
						}
					}
					}
				.support-count{
					 position: absolute;
					 right: 12px;
					 bottom:14px;
					 padding: 0 8px;
					 height: 24px;
					 line-height: 24px;
					 border-radius:14px;
					 background: rgba(0,0,0,0.2);
					 text-align: center;
					 .count{
					 	vertical-align: top;
					 	 font-size: 10px;
					 }
					 .icon-keyboard_arrow_right{
					 	margin-left: 2px;
					 	line-height: 24px;
					 	font-size: 17px;
					 }
				}
				
				}
				.bulletin-wrapper{
					position: relative;
					height: 28px;
					line-height: 28px;
					padding: 0 22px 0 12px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					background: rgba(7,17,27,0.2);
					.bulletin-title{
						display: inline-block;
						vertical-align: top;
						margin-top: 8px;
						width: 22px;
						height: 12px;
						background: url(img/bulletin@2x.png);
						background-repeat: no-repeat;
						background-size: cover;
					}
					.bulletin-text{
						vertical-align: top;
						margin: 0 4px;
						font-size: 10px;
					}
					.icon-keyboard_arrow_right{
						position: absolute;
						font-size: 10px;
						right: 12px;
						top: 8px;
					}
				}
				.backgroud{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
					filter: blur(10px);
				}
				.detail{
					position: fixed;
					top: 0;
					left: 0;
					z-index: 100;
					width: 100%;
					height: 100%;
					overflow: auto;
					background: rgba(7,17,27,0.8);
					backdrop-filter:blur(10px);
					.deta-wrapper{
						min-height: 100%;
						width: 100%;
					}
					.detail-main{
						 margin-top: 64px;
						 padding-bottom: 64px;
						 .name{
						 	line-height: 16px;
						 	text-align: center;
						 	font-size: 16px;
						 	font-weight: 700;
						 }
						 .star-wrapper{
						 	 margin-top:18px;
						 	 padding:2px 0;
						 	 text-align: center;
						 }
						 .title{
						 	 display: flex;
						 	 width: 85%;
						 	 margin: 28px auto 24px auto;
						 	 .line{
						 	 		flex: 1;
						 	 		position: relative;
						 	 		top: -6px;
						 	 		border-bottom: 1px solid rgba(255,255,255,.2);
						 	 }
						 	 .text{
						 	 		padding: 0 12px;
						 	 		font-weight: 700;
						 	 		font-size: 14px;
						 	 }
						 }
						 .supports{
						 	 	 width: 85%;
						 	 	 margin:0 auto;
						 	 	 .support-item{
						 	 	 		padding: 0 12px;
						 	 	 	  margin-bottom: 12px;
						 	 	 	  font-size: 0;
						 	 	 	  &:last-chid{
						 	 	 	  	margin-bottom: 0;
						 	 	 	  }
						 	 	 	  .icon{
						 	 	 	  	display: inline-block;
						 	 	 	  	width: 16px;
						 	 	 	  	height: 16px;
						 	 	 	  	vertical-align: top;
						 	 	 	  	margin-right: 6px;
						 	 	 	  	background-size: cover;
						 	 	 	  	background-repeat: no-repeat;
						 	 	 	  	&.decrease{
												 background: url(img/decrease_1@2x.png);
												 background-repeat: no-repeat;
											   background-size:cover;
											}
											&.discount{
												background: url(img/discount_1@2x.png);
												background-repeat: no-repeat;
											  background-size:cover;
											}
											&.guarantee{
												background: url(img/guarantee_1@2x.png);
												background-repeat: no-repeat;
											  background-size:cover;
											}
											&.invoice{
												background: url(img/invoice_1@2x.png);
												background-repeat: no-repeat;
											  background-size:cover;
											}
											&.special{
												background: url(img/special_1@2x.png);
												background-repeat: no-repeat;
										   	background-size:cover;
											}
						 	 	 	  }
						 	 	 	  .text{
						 	 	 	  	line-height: 16px;
						 	 	 	  	font-size: 14px;
						 	 	 	  }
						 	 	 }
						 	 }
						 	 .bulletin{
						 	 		width: 85%;
						 	 		margin: 0 auto;
						 	 		.content{
						 	 			padding:  0 12px;
						 	 			line-height: 24px;
						 	 			font-size: 12px;
						 	 		}
						 	 }
					}
				}
				.detail-close{
					position: relative;
					width: 32px;
					height: 32px;
					margin: -64px auto 0 auto;
					clear: both;
					font-size: 32px;
				}
			}
			
			
			
</style>
